flex 布局

2020-03-15 · 阅读 7480 · 字数 139

例如，我在微信小程序中想使用 flex 布局来实现如下的一行布局： | 功能图标 | 功能名称 | 引导箭头| 即，水平分割一行。 实现效果 模板代码 <view class="nav"> <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="n ...

阅读全文...

2020-03-15 · 阅读 8592 · 字数 248

在微信小程序中可以放心地使用 flex 布局，所以尝试了一下 flex 的居中布局。 示例模板代码 <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="nav_text_wrapper"> <text>手机认证</text> </view> ...

阅读全文...

2020-11-11 · 阅读 8189 · 字数 198

假设页面 顶部是一个 banner，class 为 top 余下部分是一个 scroll view，占据了页面剩余的高度 实现方法 Page { display: flex; height: 100%; flex-direction: column; } .top { } .bottom { flex: 1; } 在没有数据时，这样的布局看上去没有问题。但是一旦填充上数据，会发现 scroll view 的高度会被撑开。 真正的实现方法。。。 <view class="bottom"> <scroll-view class ...

阅读全文...